<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>


  <!-- Bootstrap core CSS -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>


<!-- Custom styles for this template -->
<link href="../static/css/signin.css" rel="stylesheet">

<script>
    $(function(){
    //短信验证码
    //1. 找标签:btn1
    //2. 定时器完成: 显示时间变化!!!
    //setInterval(函数, 时间)
    //3.难点: 定时器中函数,不断减1, 见到<0终止!!!!
    var btn1 = $('#sendsms');
    var count=5; // 倒计时数量 一般为60秒!
    var timer =null; //定时器
    //事件
    btn1.click(function(){
    phone = $('#phone').val(); //val:值
    if(phone==''){
    alert('请输入电话号码');
    return false;
    }
    //ajax
    $.ajax({
    type: "get",
    url: "/message/sms_send/",
    data:"phone="+phone,

    success: function(msg){
    console.log( "Data Saved: " + msg );
    //转换为json
    obj = eval("("+msg+")");
    console.log('结果:'+obj.Message);
    if(obj.Message=='OK'){
    $('#msg').html('短信发送成功')
    }else{
    $('#msg').html('短信发送失败')
    }
    },
    error:function(res){
    //状态码
    console.log(res.status)
    }
    });
    //end --发送ajax
    //特效 start
    //禁用
    $(this).attr("disabled",'true');
    var _this= $(this);
    //定时器实现时间每次减少1
    timer = setInterval(function(){
    count--;
    console.log("剩余时间:"+count);
    if(count>=0){
    //this表示对象!!!! 表示定时器!!!!
    //this.innerHTML="时间剩余"+ count+"秒";
    _this.html(count+"秒s后重发")
    }else {
        _this.disabled = false;
        clearInterval(timer);
        _this.html("重新发送");
        count = 5;
        $('#sendsms').removeAttr("disabled")
    }
    },1000);
    });
    //特效 end
    //短信验证
        //change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。
    $("#smscode").change(function(){
    //验证ajax
    var phone = $('#phone').val();
    var code = $(this).val();
    $.ajax({
    type: "get",
    url: "/message/sms_check/",
    data:"phone="+phone+"&code="+code,
    success: function(msg){
    console.log( "Data Saved: " + msg );
    //已经为json
    if(msg.code=='200'){
    $('#msg').html('验证码正确')
    }else{
    $('#msg').html('手机验证码输入错误')
    }
    },
    error:function(res){
    //状态码
    console.log(res.status);
    alert('连接服务器失败')
    }
    });
    //end验证ajax
    })
    //短信验证end
    })
</script>

<body>


<form class="form-signin" role="form" method="POST" >
        {% csrf_token %}
      <h2 class="form-signin-heading">请注册</h2>
{#      <select name="user_grade" id="input${1/(\w+)/\u\1/g}" class="form-control" required="required">#}
{#        <option value="1">一级读者</option>#}
{#        <option value="2">二级读者</option>#}
{#        <option value="3">三级读者</option>#}
{#      </select>#}
{#    <br>#}
{#      <input type="text" name='user_code' class="form-control" placeholder="编号" required autofocus>#}
      <input type="text" name='username' class="form-control" placeholder="用户名" required>
      <input type="password" name='password' class="form-control" placeholder="密码" required>
      <input type="text" name='phone' id='phone' class="form-control" placeholder="电话" required>
{#      <input type="password" name='user_addr' class="form-control" placeholder="地址" required>#}
   <input type="button" name="sendsms"  id='sendsms' value="发送" class="btn btn-lg btn-primary btn-block" style="width: 100px;float:right;" >

    <input type="text" name="code" id="smscode" placeholder="验证码" style="width: 150px;height: 40px" class="form-control">
    <br>
    <span id="msg"></span>
{#    图文验证#}
     <!--图形验证码 django2.0直接调用表单项{{ register_form.captcha }}-->
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <!-- 手动生成验证码表单项--->
	  	  <img src="{{image_url}}" alt="captcha" class="captcha">
          <input autocomplete="off" id="id_captcha_1" name="captcha_1" type="text" placeholder="输入验证码">
          <input id="id_reg_captcha_0" name="captcha_0" type="hidden" value="{{ hashkey }}">
      </div>
    <br><br><br>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <button class="btn btn-lg btn-primary btn-block" >提交</button>

      </div>

    </form>
</body>
{#图文ajax#}
<script>
    $(function () {
        //刷新
        //attr() 方法设置或返回被选元素的属性和值。
        //val() 方法返回或设置被选元素的 value 属性。
        $('.captcha').click(function () {
            $.getJSON('/message/img_fresh/',function (result) {
                    $('.captcha').attr('src',result['image_url']);
            $('#id_captcha_0').val(result['hashkey'])
            });
                return False
        });
    //验证
        //blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数。
    $('#id_captcha_1').blur(function () {
        console.log('用户输入的：'+$('#id_captcha_1').val());
        //获取输入框和隐藏字段id_captcha_0的值
        code=$('#id_captcha_1').val();
        hashkey=$('#id_captcha_0').val();
        $.getJSON('/message/img_check',{'code':code,'hashkey':hashkey},
        function (res) {
            //1，验证码正确，0，错误
            alert('....验证结果'+res);
            if(res.status) {
                $('#msg').html('验证码正确')}
            else
                {$('#msg').html('验证码错误')}
        })
    })
    })
</script>
</html>
